<template>
    <div>
        <canvas ref="humanCanvas" width="500px" height="500px" :style="picSize"></canvas>

        <div style="display:none">
            <img ref="frontImg" :src='frontImg'>
            <img ref="backImg" :src='backImg'>
        </div>
    </div>
</template>

<script>
    import canvas from 'canvas'
    export default {
        props: ["dotList", "dotLabels","labelsShow","picSize"],
        data() {
            return {
                canvas: null,
                context: null,
                wrate: null,
                hrate: null,
                maxRad: 9,
                minRad: 5,
                frontImg: require('./img/front.png'),
                backImg: require('./img/back.png'),
            }
        },
        mounted() {
            this.canvas = this.$refs.humanCanvas; //创建一个画布
            this.wrate = parseInt(this.canvas.style.width) / parseInt(this.canvas.width);
            this.hrate = parseInt(this.canvas.style.height) / parseInt(this.canvas.height);
            this.context = this.canvas.getContext('2d');
            let fImg = this.$refs.frontImg;
            let bImg = this.$refs.backImg;
            fImg.onload = () => {
                this.context.drawImage(fImg, 0, 0, 433 / 2, 935 / 2);
                bImg.onload = () => {
                    this.context.drawImage(bImg, 433 / 2, 0, 433 / 2, 935 / 2);
                    this.drawAllDot();
                    this.setEvent();
                }
            }
        },
        methods: {
            drawOneDot(centerX, centerY) {
                let points = 512; //多边形边的总数目
                let rad, theta;
                let twoPi = 2 * Math.PI;
                let x0, y0;
                this.context.beginPath();
                this.context.strokeStyle = "#a92711";
                this.context.lineWidth = 1.01;
                this.context.fillStyle = "#a8001b";
                theta = 0;
                x0 = centerX + rad * Math.cos(theta);
                y0 = centerY + rad * Math.sin(theta);
                this.context.lineTo(x0, y0);
                for (let i = 0; i < points; i++) {
                    theta += twoPi / points;
                    rad = this.minRad + Math.random() * (this.maxRad - this.minRad); //随机半径
                    x0 = centerX + rad * Math.cos(theta);
                    y0 = centerY + rad * Math.sin(theta);
                    this.context.lineTo(x0, y0);
                }
                this.context.stroke();
                this.context.fill();
                this.context.closePath();
            },
            drawAllDot() {
                for (let x in this.dotList) {
                    let dot = this.dotList[x];
                    this.drawOneDot(dot[0], dot[1]);
                }
            },
            setEvent() {
                let that = this;
                this.canvas.onmousedown = function(e) {
                    let rad = that.maxRad;
                    let wrate = that.wrate;
                    let hrate = that.hrate;
                    for (let x in that.dotList) {
                        let dot = that.dotList[x];
                        let label = that.dotLabels[x];
                        if (e.offsetX >= (dot[0] - rad) * wrate && e.offsetX <= (dot[0] + rad) * wrate && e
                            .offsetY >= (dot[1] - rad) * hrate && e.offsetY <= (dot[1] + rad) * hrate) {
                            that.labelsShow(label);
                        }
                    }
                }
            },
        }
    }
</script>
<style>

</style>
